<template>
	<view class="historyRecord">
		<!-- <navCom navName="历史记录" @previous="previous"></navCom> -->
		<view class="historyRecord_box my-mgt-10">
			<view class="historyRecord_th">
				<view class="tlt">年月</view>
				<view class="tlt">伙伴交易总金额</view>
				<view class="tlt">等级</view>
			</view>
			<view class="" v-if="dev.length > 0">
				<view class="historyRecord_td"
				:class="index % 2 == 0?'td_gray':'td_white'" 
				v-for="(item,index) in dev" :key="index">
					<view class="tlt">{{item.year}}.{{item.month}}</view>
					<view class="tlt">{{item.sumAmount || 0}}</view>
					<view class="tlt">{{item.vipLevel}}</view>
				</view>
			</view>
			<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" v-else>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import { totalamountApi } from "@/api/home.js" 
	export default {
		data() {
			return {
				memberId:1,
				pageIndex:0,
				pageSize:30,
				dev:[],
				total:1,
			};
		},
		onLoad(options){
			this.memberId = Number(options.ids)
			this.getTotalAmount()
		},
		methods:{
			async getTotalAmount(){
				if (this.dev.length >= this.total){
					uni.showToast({
						title:"没有更多数据了",
						icon:"none"
					})
					return
				} 
				let params = {
					pageIndex:this.pageIndex,
					pageSize:this.pageSize,
					memberId:this.memberId
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await totalamountApi(params)
				if(res.statusCode===200){
					uni.hideLoading()
					this.dev = [...this.dev,...res.data.data.rows]
					this.total = res.data.data.total
					this.pageIndex++
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.historyRecord{
		width: 100%;
		height: 100vh;
		background: #FAFAFA;
		.historyRecord_box{
			width: 100%;
			height: auto;
			min-height: 1165rpx;
			background: #FFFFFF;
			.historyRecord_th{
				width: 100%;
				height: 80rpx;
				background: #E0E0E0;
				display: flex;
				align-items: center;
				.tlt{
					width: 33.3%;
					height: 100%;
					text-align: center;
					line-height: 80rpx;
				}
			}
			.historyRecord_td{
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				.tlt{
					width: 33.3%;
					height: 100%;
					text-align: center;
					line-height: 80rpx;
				}
			}
			.td_gray{
				background: #F9F9F9;
			}
			.td_white{
				background: #FFFFFF;
			}
		}
	}
</style>
